<!-- Dom模板 -->
<template>
  <div class="payBigBox">
    <!-- Dom内容 -->
    <div>
      <!-- <div class="greyBox"></div> -->
      <div class="payBox">
        <div class="payMain">
          <div class="payTop">
            <span class="iconfont icon-jia" @click="payClose()"></span
            ><span>充值点券</span>
          </div>
          <div class="select">
            <div
              @click="liClick(index)"
              v-for="(item, index) in payList"
              :key="index"
              class="way"
            >
              <div :class="index === nowIndex ? 'payActive' : ''">
                <div :class="index === nowIndex ? 'payItemActive' : ''">
                  {{ item.price }}元
                </div>
                <div :class="index === nowIndex ? 'payItemActive' : ''">
                  {{ item.coupon }}点券
                </div>
              </div>
            </div>
            <div class="qita" @click="elsePrice()">
              <div :class="nowIndex === -1 ? 'payActive ' : ''">
                <div
                  v-if="nowIndex !== -1"
                  style="
                    font-size: 0.45rem;
                    color: rgb(88, 87, 87);
                    margin-top: 15px;
                  "
                >
                  其他金额
                </div>
                <div v-if="nowIndex === -1" class="shuru">
                  <div :class="nowIndex === -1 ? 'inputActive' : ''">
                    <!-- <input oninput="this.value=this.value.replace(/[^\d.]/g,'');"  maxlength="5" ref="inputRef" v-model="inputText" :style="{width:inputPrice+'px'}" type="text"/>元 -->
                    <input
                      @input="inputChange"
                      maxlength="5"
                      ref="inputRef"
                      v-model="inputText"
                      :style="{ width: inputPrice + 'rem' }"
                      type="text"
                      :class="nowIndex === -1 ? 'inputActive' : ''"
                    />元
                  </div>
                  <!-- {{(+Number(inputText)*10*10)}} -->
                  <div :class="nowIndex === -1 ? 'inputActive' : ''">
                    {{ inputDianquan }}点券
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="explain">
            <div>购买说明：</div>
            <div>1.电子货币购买成功后不可退回。</div>
          </div>
        </div>
        <div class="payBtn">
          <button @click="showPopup">确认充值</button>
        </div>
      </div>
      <transition name="mima">
        <div class="greyBox" v-if="show"></div>
      </transition>
      <transition name="mima">
        <div
          class="whiteCenter"
          :style="{ marginTop: showKeyboard ? '-4.81333rem' : '-3.21333rem' }"
          v-if="show"
        >
          <div @click="closeMima" class="iconfont icon-cuo2"></div>
          <div class="">请输入支付密码</div>
          <div class="">
            付款{{ nowIndex === -1 ? inputText : payList[nowIndex].price }}元
          </div>
          <div>
            {{ mimaFlag ? "支付密码不正确" : "" }}
          </div>
          <van-password-input
            :value="value"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
            :error-info="errorInfo"
          />
        </div>
      </transition>
      <!-- 数字键盘 -->
      <van-number-keyboard
        v-model="value"
        :show="showKeyboard"
        @blur="showKeyboard = false"
      />
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { Toast } from "vant";
export default {
  data() {
    return {
      msg: "测试",
      value: "123",
      showKeyboard: false,
      nowIndex: 0,
      inputText: "",
      show: false,
      mimaFlag: false,
      errorInfo: "",
      payList: [
        {
          coupon: 50,
          price: 5,
        },
        {
          coupon: 100,
          price: 10,
        },
        {
          coupon: 200,
          price: 20,
        },
        {
          coupon: 300,
          price: 30,
        },
        {
          coupon: 500,
          price: 50,
        },
      ],
    };
  },
  watch: {
    value(value) {
      if (value.length === 6 && value !== "123456") {
        // this.errorInfo = "密码错误";
        this.mimaFlag = true;
        this.value = "";
      } else if (value.length === 6 && value === "123456") {
        this.$parent.back();
        this.show = false;
        if (this.nowIndex === -1) {
          this.$store
            .dispatch("bags/payMoney", {
              userid: this.$store.state.login.loginuser.userid,
              money: this.inputDianquan,
            })
            .then((res) => {
              this.$store.dispatch("login/getUser", {
                userid: this.$store.state.login.loginuser.userid,
              });
            });
        } else {
          this.$store
            .dispatch("bags/payMoney", {
              userid: this.$store.state.login.loginuser.userid,
              money: +this.payList[this.nowIndex].coupon,
            })
            .then((res) => {
              this.$store.dispatch("login/getUser", {
                userid: this.$store.state.login.loginuser.userid,
              });
            });
        }
      } else {
        this.errorInfo = "";
      }
    },
  },
  computed: {
    inputPrice() {
      //  console.log(this.inputText.length);
      return (this.inputText.length * 10 + 5) / 37.5;
    },
    inputDianquan() {
      let dian = 0;
      if (this.inputText !== "") {
        if (
          this.inputText.indexOf(".") !== -1 &&
          this.inputText.split(".")[1].length !== 0
        ) {
          let num = 1;
          for (let i = 0; i < this.inputText.split(".")[1].length + 1; i++) {
            num = num * 10;
          }

          console.log(num);

          dian = (this.inputText * num * 10) / num;
        } else {
          return this.inputText * 10;
        }
      }
      // console.log(dian);
      return dian;
    },
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    payClose() {
      this.$parent.back();
    },
    showPopup() {
      if (this.nowIndex !== -1) {
        this.value = "";
        this.show = true;
      } else if (this.nowIndex === -1 && this.inputText !== "") {
        this.value = "";
        this.show = true;
      } else if (this.nowIndex === -1 && this.inputText === "") {
        Toast({
          message: "请输入正确金额",
          position: "bottom",
        });
      }
    },
    btnClick() {
      // this.$parent.back();
      // if (this.nowIndex === -1) {
      // this.$store
      //   .dispatch("bags/payMoney", {
      //     userid: this.$store.state.login.loginuser.userid,
      //     money: this.inputDianquan,
      //   })
      //   .then((res) => {
      //     this.$store.dispatch("login/getUser", {
      //       userid: this.$store.state.login.loginuser.userid,
      //     });
      //   });
      // this.$store.commit("bags/transientMoney", this.inputDianquan);
      // console.log(this.inputDianquan);
      // this.$router.history.push({
      //   path: "/checkstand",
      //   query: {
      //     path: this.$route.path,
      //   },
      // });
      // beforePath: this.$route.query.path,
      // } else {
      // this.$store
      //   .dispatch("bags/payMoney", {
      //     userid: this.$store.state.login.loginuser.userid,
      //     money: +this.payList[this.nowIndex].coupon,
      //   })
      //   .then((res) => {
      //     this.$store.dispatch("login/getUser", {
      //       userid: this.$store.state.login.loginuser.userid,
      //     });
      //   });
      // this.$store.commit(
      //   "bags/transientMoney",
      //   +this.payList[this.nowIndex].coupon
      // );
      // this.$router.history.push({
      //   path: "/checkstand",
      //   query: {
      //     path: this.$route.path,
      //   },
      // });
      // console.log(this.inputDianquan);
      // }
    },
    liClick(index) {
      this.inputText = "";
      this.nowIndex = index;
    },
    elsePrice() {
      this.nowIndex = -1;
    },
    inputChange(e) {
      this.inputText = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || "";
    },
    closeMima() {
      this.show = false;
      this.showKeyboard = false;
      this.value = "";
    },
  },
};
</script>

<style scoped>
/* @import url(); 引入css类 */
@import url("../../../static/fonts/iconfont.css");
/* 弹窗 */
.whiteCenter {
  background-color: white;
  margin: 0 auto;
  position: fixed;
  left: 50%;
  top: 50%;
  transition: all 0.5s;
  z-index: 10;
  margin-top: -2.901333rem;
  margin-left: -4rem;
  width: 80vw;
  border-radius: .533333rem;
  padding: .666667rem 0 .933333rem;
  height: 5.804453rem;
}
.whiteCenter > div:nth-child(1) {
  font-size: .666667rem;
  margin-bottom: .213333rem;
  padding-left: .453333rem;
}
.whiteCenter > div:nth-child(2) {
  font-size: .533333rem;
  /* line-height: 35px; */
  text-align: center;
  margin-bottom: .346667rem;
  font-family: PingFangSC-regular;
}
.whiteCenter > div:nth-child(3) {
  font-size: .4rem;
  text-align: center;
  margin-bottom: .266667rem;
  font-family: PingFangSC-regular;
}
.whiteCenter > div:nth-child(4) {
  font-size: .4rem;
  /* height: 20px; */
  text-align: center;
  color: red;
  margin-bottom: .4rem;
  font-family: PingFangSC-regular;
}
.greyBox {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
}
.payBox {
  position: absolute;
  background-color: white;
  width: 100vw;
  height: 100vh;
  padding: 0px 0 0.533333rem;
  font-family: PingFangSC-regular;
  bottom: 0;
}
.payTop {
  line-height: 1.333333rem;
  font-size: 0.453333rem;
  font-family: PingFangSC-regular;
  position: relative;
  /* padding-left: 20px; */
}
.payMain {
  padding: 0 0.312rem;
}
.payTop {
  margin-left: 0.266667rem;
}
.payTop > span:nth-child(1) {
  transform: rotate(45deg);
  color: #666666;
  font-size: 0.533333rem;
  display: inline-block;
}
.payTop > span:nth-child(2) {
  margin-left: -1.173333rem;
  width: 1.813333rem;
  position: absolute;
  left: 50%;
}

.select {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
  padding-top: 0.533333rem;
}
.way {
  width: calc(100vw / 3.2);
}
.way > div {
  border: 2px solid rgb(206, 205, 205);
  border-radius: 0.133333rem;
  width: 2.666667rem;
  margin: 0 auto;
  padding: 0.533333rem 0;
  text-align: center;
  margin-bottom: 0.533333rem;
}
.way > div > div:nth-child(1) {
  font-size: 0.48rem;
  color: rgb(88, 87, 87);
  margin-bottom: 0.266667rem;
}
.way > div > div:nth-child(2) {
  font-size: 0.426667rem;
  color: rgb(138, 136, 136);
}

.qita .shuru {
  margin-bottom: 0px;
}
.shuru > div:nth-child(2) {
  font-size: 0.426667rem;
  color: rgb(138, 136, 136);
  margin-top: 0.266667rem;
}
.shuru > div:nth-child(1) {
  font-size: 0.48rem;
  color: rgb(88, 87, 87);
  margin-bottom: 0.266667rem;
}
.qita {
  /* line-height: 35px; */
  width: calc(100vw / 3.2);
  text-align: center;
  /* margin-bottom:0; */
}
.qita > div {
  border: 2px solid rgb(206, 205, 205);
  border-radius: 0.133333rem;
  width: 2.666667rem;
  margin: 0 auto;
  padding: 0.533333rem 0;
  text-align: center;
  margin-bottom: 0.533333rem;
  height: 2.629667rem;
}
.qita input {
  /* margin:10px 0; */
  border: none;
  width: 1.6rem;
}
.payMain .payActive {
  border: 2px solid #fda359;
  color: #fda359;
}
.qita .payActive {
  border: 2px solid #fda359;
  color: #fda359;
}
.payMain .way > div .payItemActive {
  color: #fda359;
}
.payMain .way > div .inputActive {
  color: #fda359;
}
.payMain .qita > div .inputActive {
  color: #fda359;
}
.explain {
  margin-top: 0.533333rem;
  color: #868686;
  margin-left: 0.266667rem;
  line-height: 0.72rem;
  font-size: 0.346667rem;
}
.payBtn {
  margin-top: 0.56rem;
  border-top: 2px solid #f9f9f9;
  padding-top: 0.24rem;
  text-align: center;
  position: absolute;
  bottom: 0.32rem;
  width: 100%;
  text-align: center;
  left: 0;
}
.payBtn > button {
  width: 9.2rem;
  margin: 0 auto;
  line-height: 1.146667rem;
  border-radius: 0.8rem;
  border: none;
  outline: none;
  background-color: #f09d11;
  color: white;
  font-size: 0.4rem;
  font-family: PingFangSC-regular;
  /* margin:0 auto; */
}
.mima-enter {
  opacity: 0;
}
.mima-leave-active {
  opacity: 0;
}
</style>
<style>
.payBigBox .van-popup {
  background-color: rgba(0, 0, 0, 0);
}
.payBigBox .van-overlay {
  background-color: rgba(0, 0, 0, 0.3);
}
</style>